<template>
    <div class="flex flex-col bg-yellow-1 flex-grow">
      <!-- hello tresjs -->
      <TresCanvas
        shadows
        alpha
      >
        <TresPerspectiveCamera
          :position="[3, 3, 3]"
          :look-at="[0, 0, 0]"
        />
        <TresMesh :scale="0.2">
          <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
          <TresMeshBasicMaterial color="orange" />
        </TresMesh>
        <!-- <TresAmbientLight :intensity="1" /> -->
        <TresSpotLight :position="[9, 3, 3]"/>
        <OrbitControls />
      </TresCanvas>
    </div>
  </template>
  <script setup lang="ts">
  import { OrbitControls } from "@tresjs/cientos";
  import { TresCanvas, extend, useTres } from "@tresjs/core";
  // import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
  // extend({ OrbitControls });
  
  // const {
  //   renderer,
  //   camera,
  // } = useTres();
  </script>
  